<template>
  <!-- 社保公积金台账列表页 -->
  <div id="socialSecurityAccount">
    <div class="pageHead">
      <el-form ref="listQuery" :model="listQuery" class="listQuery">
        <el-form-item>
          <el-date-picker
            clearable
            v-model="date"
            value-format="yyyy-MM"
            type="month"
            placeholder="选择年月份"
            @change="handleDateChange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="listQuery.subId"
            class="maxSelect"
            filterable
            clearable
            placeholder="所属公司"
          >
            <el-option
              v-for="item in companyList"
              :key="item.subid"
              :value="item.subid"
              :label="item.subName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="isConfirmLoading"
            @click="handleSearch"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item style="float: right; text-align: right; margin-right: 0">
          <el-button
            type="primary"
            @click="handleEdit(true)"
            >添加台账</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="tableContent">
        <el-table
          :data="tableData"
          :border="true"
          style="width: 100%"
          height="100%"
          v-loading="tableLoading"
          size="medium"
        >
          <el-table-column
            prop="standingBookName"
            label="台账名称"
            align="left"
          />
          <el-table-column
            prop="subName"
            label="所属公司"
            align="left"
          />
          <el-table-column prop="personalCount" label="参保人数" align="left" />
          <el-table-column label="社保合计">
            <el-table-column prop="personalSS" label="个人承担" align="right" />
            <el-table-column prop="companySS" label="公司承担" align="right" />
            <el-table-column prop="ssTotal" label="合计" align="right" />
          </el-table-column>
          <el-table-column label="公积金合计">
            <el-table-column prop="personalAF" label="个人承担" align="right" />
            <el-table-column prop="companyAF" label="公司承担" align="right" />
            <el-table-column prop="afTotal" label="合计" align="right" />
          </el-table-column>
          <el-table-column label="操作" width="220px" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleToDetail(scope.row)"
                >查看</el-button
              >
              <el-button type="text" @click="handleEdit(false, scope.row)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :small="true"
        background
        @size-change="(value) => handleSearchChange(value, 'pageSize')"
        @current-change="(value) => handleSearchChange(value, 'pageIndex')"
        :current-page="listQuery.PageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="listQuery.PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagingChild"
      ></el-pagination>
    </div>
    <EditAccount
      :visible.sync="isShowEdit"
      :isCreate="isCreate"
      :editData="editData"
      :yearNumber="listQuery.yearNumber"
      :monthNumber="listQuery.monthNumber"
      @editDeleteAccount="editDeleteAccount"
    />
  </div>
</template>
<script>
import EditAccount from "@/views/personnelRegulate/rewardManagement/socialSecurity/components/EditAccount.vue";
import { getCompanyList } from "@/util/xc/utils";
import { mapState } from "vuex";
import { math } from '@/util/math.js';
export default {
  name: "socialSecurityAccount",
  components: {
    EditAccount,
  },
  data() {
    return {
      date: `${new Date().getFullYear()}-${new Date().getMonth() + 1}`,
      listQuery: {
        subId: "",
        keyWord: "",
        pageIndex: 1,
        pageSize: 10,
        yearNumber: new Date().getFullYear(),
        monthNumber: new Date().getMonth() + 1,
      },
      isConfirmLoading: false,
      tableData: [],
      total: 0,
      tableLoading: false,
      isCreate: true,
      isShowEdit: false,
      editData: {}, // 用于编辑台账名称
    };
  },
  computed: {
    ...mapState({
      companyList: (state) => state.reward.companyList,
    }),
  },
  methods: {
    /**
     * @description 获取台账主表数据
     */
    searchDataList() {
      this.tableLoading = true;
      this.$api.socialSecurity
        .GetLedgerPageList(this.listQuery)
        .then((res) => {
          // this.tableData = res.data.data.items;
          this.formatTableData(res.data.data.items);
          this.total = res.data.data.totalCount;
          if (this.tableData.length == 0)
            this.$message.warning(res.data.message);
        })
        .finally(() => {
          this.tableLoading = false;
        });
    },

    /**
     * @description 编辑、删除台账
     */
    editDeleteAccount(data, operateType) {
      const paramsUrl = `?operateType=${operateType}`;
      this.$api.socialSecurity.EditLedgerData(paramsUrl, data).then((res) => {
        console.log(res);
        if (res.data.status == 200) {
          this.$message.success(res.data.message);
          this.searchDataList();
        }
      });
    },
    formatTableData(listData) {
      this.tableData = listData.map(e => {
        for (const key in e) {
          if(['personalSS','companySS','ssTotal','personalAF','companyAF','afTotal'].includes(key)) {
            e[key] = math.toFixed(e[key]);
          }
        }
        return e;
      })
    },
    /** 点击搜索触发查询 */
    handleSearch() {
      this.listQuery.pageIndex = 1;
      this.searchDataList();
    },
    handleEdit(isCreate, data = {}) {
      this.isCreate = isCreate;
      if (!this.isCreate) {
        this.editData = data;
      }
      this.isShowEdit = true;
    },

    handleDateChange(date) {
      // console.log('date', date);
      if (date) {
        this.listQuery.yearNumber = parseInt(date.substring(0, 4));
        this.listQuery.monthNumber = parseInt(date.substring(5, 9));
      } else {
        this.listQuery.yearNumber = 0;
        this.listQuery.monthNumber = 0;
      }
    },

    /**
     * @description 分页属性切换触发
     * @param value 修改值
     * @param prop 修改的属性名
     */
    handleSearchChange(value, prop) {
      this.listQuery[prop] = value;
      this.searchDataList();
    },
    handleToDetail(data) {
      data.ledgerId = data.id;
      this.$store.commit("SET_ACCOUNT_ROUTER_DATA", data);
      this.$router.push({
        path: "/socialSecurityAccountDetails",
        query: {
          fromPage: "accountList",
        },
      });
    },
    handleDelete(data) {
      console.log(data);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.editDeleteAccount(
            {
              ledgerId: data.id,
              ledgerName: data.standingBookName,
            },
            2
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  activated() {
    // 获取
    getCompanyList();
    this.searchDataList();
  },
};
</script>
<style lang="less" scoped>
// @import url("../less/common.less");
#socialSecurityAccount {
  .tableContent {
    padding: 0;
    :deep(.el-table) {
      .el-button {
        margin: 0;
      }
    }
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
  .listQuery {
    .el-form-item {
      float: left;
      width: 150px;
      margin-right: 15px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>